<template>
  <DynamicForm :form-items="formItems" :initial-values="initialValues" @submit="handleSubmit"> </DynamicForm>
</template>

<script setup>
import { ref } from "vue";
import DynamicForm from "@/components/Form/index.vue";
import { message } from "ant-design-vue";

const formItems = ref([
  {
    name: "username",
    label: "用户名",
    type: "input",
    width: "200px",
    rules: [
      { required: true, message: "请输入用户名" },
      { min: 3, max: 10, message: "用户名长度在3-10个字符" },
    ],
  },
  {
    name: "password",
    label: "密码",
    width: "200px",
    type: "password",
    rules: [
      { required: true, message: "请输入密码" },
      { pattern: /^[a-zA-Z0-9]{6,12}$/, message: "密码必须是6-12位字母或数字" },
    ],
  },
  {
    name: "age",
    label: "年龄",
    width: "200px",
    type: "number",
    min: 0,
    max: 120,
    rules: [{ required: false, message: "请输入年龄" }],
  },
  {
    name: "gender",
    label: "性别",
    width: "200px",
    type: "select",
    options: [
      { label: "男", value: "male" },
      { label: "女", value: "female" },
    ],
    rules: [{ required: true, message: "请选择性别" }],
  },
  {
    name: "hobbies",
    label: "爱好",
    width: "200px",
    type: "checkbox",
    options: [
      { label: "游泳", value: "swimming" },
      { label: "跑步", value: "running" },
      { label: "阅读", value: "reading" },
    ],
  },
  {
    name: "agree",
    label: "同意协议",
    width: "200px",
    type: "switch",
    rules: [
      {
        validator: (_, value) => (value ? Promise.resolve() : Promise.reject("必须同意协议")),
      },
    ],
  },
  {
    name: "birthday",
    label: "生日",
    width: "200px",
    type: "date",
    rules: [{ required: true, message: "请选择生日" }],
  },
  {
    name: "resume",
    label: "个人简介",
    width: "200px",
    type: "textarea",
    maxlength: 200,
    showCount: true,
  },
  {
    name: "avatar",
    label: "头像",
    width: "200px",
    type: "upload",
    listType: "picture-card",
    accept: "image/*",
  },
]);

const initialValues = ref({
  username: "张三",
  age: 25,
  gender: "male",
  hobbies: ["reading"],
  agree: true,
  customField: "", // 确保自定义字段有初始值
});

const handleSubmit = (values) => {
  console.log("提交数据:", values);
  message.success("表单提交成功");
};

const handleReset = () => {
  console.log("表单已重置");
};
</script>
